<template>
  <div>
    <div class="phone" v-if="mobile">
      <el-tooltip class="item" effect="light" :content="show ? encryption : inputValue" placement="top"
        :disabled="isShowTooltip">
        <span class="inputValue">{{ show ? encryption : inputValue }}</span>
      </el-tooltip>
      <span class="eyes" v-if="eyes">
        <el-icon v-if="show" @click="handleChangePass">
          <svg-icon icon-class="eye-open"/>
        </el-icon>
        <el-icon v-else @click="handleChangePass">
          <svg-icon icon-class="eye"/>
        </el-icon>
      </span>
    </div>
    <div v-else>--</div>
  </div>
</template>
  
<script setup>
const props = defineProps({
  mobile: {
    type: String,
    default: ''
  },
  eyes: {
    type: Boolean,
    default: true
  }
})

const show = ref(true)
const isShowTooltip = ref(true)
const inputValue = ref('')
const encryption = ref('--')

const handleChangePass = () => {
  show.value = !show.value;
  // if (inputValue.value.length > 12) return (isShowTooltip.value = show.value);
}


// 显示文本
const getShowText = val => {
  if (typeof val.value !== 'string') {
    return val.value = val.value + '';
  } else {
    return val.value;
  }
}
//文本脱敏
const filterValue = val => {
  if (val.value === '--' || val.value === '' || val.value === 'null') {
    return val.value = '--'
  } else {
    encryption.value = val.value.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
  }
}

onMounted(() => {
  inputValue.value = props.mobile;
  getShowText(inputValue)
  filterValue(inputValue)
})
</script>
  
  
<style lang="scss" scoped>
.phone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 130px;
  height: 25px;

  .inputValue {
    margin-top: 2px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .eyes {
    display: inline-block;
    margin-left: 10px;
    width: 16px;
    line-height: 10px;
    cursor: pointer;

  }
}
</style>